<template>
  <div>
    <!--    <div class="crumbs">-->
    <!--      <el-breadcrumb separator="/">-->
    <!--        <el-breadcrumb-item>-->
    <!--          <i class="el-icon-lx-cascades"></i> 待处理专业-->
    <!--        </el-breadcrumb-item>-->
    <!--      </el-breadcrumb>-->
    <!--    </div>-->
    <!--    <el-row :gutter="20">-->
    <!--      <el-col :span="50">-->
    <!--        <el-row :gutter="20" class="mgb20">-->
    <!--          <el-col :span="500">-->
    <!--            <el-card shadow="hover" :body-style="{ padding: '15px' }">-->
    <!--              <div v-for="item in BadgeData" :key="item.sid"  class="badge">-->
    <!--                <el-badge :value="item.notClassIDNum" >-->
    <!--                  <el-button size="small">{{-->
    <!--                    item.majorName-->
    <!--                  }}</el-button>-->
    <!--                </el-badge>-->
    <!--              </div>-->
    <!--            </el-card>-->
    <!--          </el-col>-->
    <!--        </el-row>-->
    <!--      </el-col>-->
    <!--    </el-row>-->
    <!-- <el-row :gutter="20">
      <el-col :span="60"> -->
    <div>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>
            <i class="el-icon-lx-cascades"></i> 分配班级
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="container-left">
          <el-tree
            :data="treeData.data"
            :props="{ children: 'children', label: 'label' }"
            node-key="id"
            @node-click="handleNodeClick"
          />
        </div>
        <div class="container-right">
          <div class="handle-box">
            <div>
              <el-select
                v-model="tableSelection.classId"
                placeholder="请选择班级"
                class="handle-select mr10"
              >
                <el-option
                  v-for="item in classList"
                  :key="item.sid"
                  :label="item.className"
                  :value="item.sid"
                >
                </el-option>
              </el-select>
              <el-button
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="handleAlloc"
                >批量分配</el-button
              >
            </div>
            <div>
              <el-input
                v-model="query.name"
                placeholder="输入学生姓名"
                class="handle-input mr10"
              ></el-input>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
                >搜索</el-button
              >
            </div>
          </div>

          <el-table
            :data="tableData"
            border
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" />
            <el-table-column
              :show-overflow-tooltip="true"
              :prop="item.prop"
              :label="item.label"
              v-for="item in propt"
              :key="item.prop"
            >
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :currentPage="query.pageNum"
              :page-sizes="[10, 20, 40]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotal"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- </el-col>
    </el-row> -->
  </div>
</template>

<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import request from "../../utils/request";

export default {
  name: "AllocateClass",
  setup() {
    const router = useRouter();

    const propt = [
      {label: "学生姓名", prop: "studentName"},
      {label: "性别", prop: "gender"},
      {label: "身份证号", prop: "idCardNo"},
    ];

    const treeData = reactive({
      data: [],
    });
    // request.get("/college/tree").then((res) => {
    //   treeData.data = res.data;
    // });
    const queryAdviserId = reactive({
      adviserId: localStorage.getItem("sid")
    })
    const getTree = () => {
      request.get("/college/tree",
          {
            params: queryAdviserId,
          }).then((res) => {
        treeData.data = res.data;
      });
    }
    getTree();
    const query = reactive({
      majorId: "",
      name: "",
      collegeId: "",
      adviserId: "",
      pageNum: 1,
      pageSize: 10,
    });

    const tableData = ref([]);
    const pageTotal = ref(0);
    // 获取表格数据
    const getData = () => {
      query.adviserId = localStorage.getItem("sid")
      request
          .get("/student/pageAlloc", {
            "params": query,
          })
          .then((res) => {
            if (res.code == 18) {
              ElMessage.warning(res.msg);
              tableData.value = [];
            } else {
              tableData.value = res.data.records;
            pageTotal.value = res.data.total;
          }
        });
    };
    const BadgeData = ref([]);
    // 获取表格数据
    const getBadgeData = () => {
      request.get("/student/studentMajor").then((res) => {
        if (res.code == 18) {
          ElMessage.warning(res.msg);
          tableData.value = [];
        } else {
          BadgeData.value = res.data;
          console.log(BadgeData);
        }
      });
    };
    getBadgeData();
    // 查询操作
    const handleSearch = () => {
      query.pageNum = 1;
      getData();
    };
    //  const handleSearchBadge = () => {
       
    //   query.pageNum = 1;
    //   getData();
    // };
    // 分页大小
    const handleSizeChange = (val) => {
      query.pageSize = val;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.pageNum = val;
      getData();
    };

    // 删除操作
    const handleDelete = (index, sid) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          request.delete("/student/" + sid).then((res) => {
            if (res.data) {
              ElMessage.success("删除成功");
              tableData.value.splice(index, 1);
            } else {
              ElMessage.error("删除失败");
            }
          });
        })
        .catch(() => {});
    };

    // 新增操作
    const handleAdd = () => {
      router.push("/admin/addNew");
    };

    const handleEdit = (sid) => {
      router.push({ path: "/admin/addNew", query: { id: sid } });
    };

    const tableSelection = reactive({
      idList: [],
      classId: "",
    });

    const handleSelectionChange = (val) => {
      tableSelection.idList = [];
      for (var i in val) {
        tableSelection.idList.push(val[i].sid);
      }
    };
//班级刷选
    const classList = ref([]);
    const getClassList = (val) => {
      request.get("/class/byMajorIdOrCollegeId?majorId=" + val).then((res) => {
        classList.value = res.data;
      });
    };

    const handleNodeClick = (data) => {
      if (!data.children) {
        getClassList(data.id);
        query.majorId = data.id;
        getData();
      }
    };

    const handleAlloc = () => {
      console.log(tableSelection.value)
      if (!tableSelection.classId) {
        ElMessage.info("请先选择班级");
        return;
      }
      if (tableSelection.idList.length === 0) {
        ElMessage.info("请选择学生");
        return;
      }
      ElMessageBox.confirm("确定分配吗？", "提示", {
        type: "warning",
      }).then(() => {
        request.post("/student/allocateClass", tableSelection).then((res) => {
          if (res.code === null) {
            ElMessage.success("分配成功");
            getData();
          } else {
            ElMessage.error("分配失败");
          }
        });
      });
    };

    return {
      propt,
      query,
      treeData,
      tableData,
      pageTotal,
      tableSelection,
      classList,
      BadgeData,
      queryAdviserId,
      getBadgeData,
      getClassList,
      handleSearch,
      handleSizeChange,
      handlePageChange,
      handleAdd,
      handleDelete,
      handleEdit,
      handleSelectionChange,
      handleNodeClick,
      handleAlloc,
    };
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: row;
}

.container-left {
  width: 20%;
  padding-right: 20px;
}

.container-right {
  width: 80%;
  display: flex;
  flex-direction: column;
}

.handle-box {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.badge {
  display: inline;
  /* position: relative; */
  /* 相对元素原来的位置距离上边缘 50px */
  top: 5px;
  padding: 10px;
  padding-top: 2px;
  color: red;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
